<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TiltPan Camera / WebSockets</title>
    <script type="text/javascript" src="widgets/AnalogDisplay.js"></script>
    <style>
  * { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }
  p { line-height:18px; }
    </style>
    <script type="text/javascript">
  var response = {};
  var displayPitch;
  var displayYaw;
  var statusFld;
  
  var ud = 0;
  var lr = 0;

  window.onload = function() {
    displayPitch = new AnalogDisplay('pitchCanvas', 100, 90,  30,  1, true, 40, -90);
    displayYaw   = new AnalogDisplay('yawCanvas',   100, 90,  30,  1, true, 40, -90);
    statusFld = document.getElementById("status");
    
    displayPitch.setValue(ud);
    displayYaw.setValue(lr);
  };

  var buildMessage = function() { // pitch & roll and not right, I know.
    var mess = {
      pitch: 0,
      yaw: -lr,     
      roll: ud
    };
    return JSON.stringify(mess);
  };

  var reset = function() {
    ud = 0;
    lr = 0;
    sendMessage(buildMessage());
  };

  var up = function() {
    ud += 1;
    ud = Math.min(ud, 90);
    sendMessage(buildMessage());
  };

  var down = function() {
    ud -= 1;
    ud = Math.max(ud, -90);
    sendMessage(buildMessage());
  };

  var left = function() {
    lr -= 1;
    lr = Math.max(lr, -90);
    sendMessage(buildMessage());
  };

  var right = function() {
    lr += 1;
    lr = Math.min(lr, 90);
    sendMessage(buildMessage());
  };

    </script>
  </head>
  <body>
    <div>
      <table style="margin: auto;">
        <tr>
          <td valign="top"><h2>TiltPan Camera pilot, on WebSocket</h2></td>
        </tr>
        <tr>
          <td align="left" colspan="2">
            <div id="status" style="padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll; border:1px solid #CCC; margin-top:10px; height: 80px;">
              <!--i>Status will go here when needed...</i-->
            </div>
          </td>
        </tr>
        <tr>
          <td valign="top" align="right" colspan="2"><a href="" onclick="javascript:resetStatus(); return false;" title="Clear status board"><small>Reset Status</small></a></td>
        </tr>
        <tr>
          <td align="center" valign="top">
            <canvas id="pitchCanvas" width="240" height="220" title="Up-Donw value"></canvas>
          </td>
          <td align="center" valign="top">
            <canvas id="yawCanvas" width="240" height="220" title="Left-Right value"></canvas>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top">Up/Down</td>
          <td align="center" valign="top">Left/Right</td>
        </tr>
        <tr>
          <td align="center" colspan="2">
            <table>
              <tr>
                <td></td><td><button onclick="up();" title="Up" style="width: 50px; height: 50px;">&#8593;</button></td><td></td>
              </tr>
              <tr>
                <td><button onclick="left();"  title="Left"  style="width: 50px; height: 50px;">&#8592;</button></td>
                <td><button onclick="reset();" title="Reset" style="width: 50px; height: 50px;">0</button></td>
                <td><button onclick="right();" title="Right" style="width: 50px; height: 50px;">&#8594;</button></td>
              </tr>
              <tr>
                <td></td><td><button onclick="down();" title="Down" style="width: 50px; height: 50px;">&#8595;</button></td><td></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>  
    </div>
    <hr>
    <script src="./tilt.pan.client.js"></script>
    <address>Oliv fecit, AD 2014</address>
  </body>
</html>
